<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"/>
    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12.16/lib/vant.min.js"></script>
    <script src="./header.js"></script>
</head>
<body>
<div id="app">
    <my-header></my-header>
    <van-button type="primary">主要按钮</van-button>
    <van-cell is-link title="基础用法" @click="show = true" />
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
</div>
<script>
    // 在 #app 标签下渲染一个按钮组件
    new Vue({
        el: '#app',
        data(){
            return {
                show: false,
                actions: [{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }],
            }
        },
        methods:{
            onSelect(item) {
                // 默认情况下点击选项时不会自动收起
                // 可以通过 close-on-click-action 属性开启自动收起
                this.show = false;
            },
        }
    });
</script>
</body>
</html>
